<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
    String basePath = request.getContextPath();
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJs Grid</title>
<link type="text/css" rel="stylesheet" href="<%=basePath %>/ExtJs5/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="<%=basePath %>/ExtJs5/ext-all.js"></script>
<script type="text/javascript" src="<%=basePath %>/ExtJs5/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script> 
</head>
<body>
    <h1>Grid</h1>
    <div id="div1" class="content"></div>
    <span id="span1"></span>
    <script type="text/javascript">
    	Ext.onReady(function(){
    		var str="成都";
    		var store=new Ext.data.JsonPStore({
    			// store配置
    			storeId:'store',
    			
    			fields: [
    		        { name: 'date', type: 'string' },
    		        { name: 'high', type: 'string' },
    		        { name: 'fengli', type: 'string' },
    		        { name: 'low', type: 'string' },
    		        { name: 'fengxiang', type: 'string' },
    		        { name: 'type', type: 'string' },
    		       
    		    ],
    		    data:{"forecast":[
    		    	{"date":"19日星期二","high":"高温 26℃","fengli":"","low":"低温 18℃","fengxiang":"无持续风向","type":"阴"},
    		    	{"date":"20日星期三","high":"高温 28℃","fengli":"","low":"低温 18℃","fengxiang":"无持续风向","type":"多云"},
    		    	{"date":"21日星期四","high":"高温 25℃","fengli":"","low":"低温 19℃","fengxiang":"无持续风向","type":"阴"},
    		    	{"date":"22日星期五","high":"高温 24℃","fengli":"","low":"低温 19℃","fengxiang":"无持续风向","type":"阴"},
    		    	{"date":"23日星期六","high":"高温 27℃","fengli":"","low":"低温 19℃","fengxiang":"无持续风向","type":"小雨"}
    		    ]},
    		    proxy: {
    		    	type: 'memory',//ajax  memory
    		        //url: 'http://www.weather.com.cn/data/sk/101270101.html',
    		        //url:'http://wthrcdn.etouch.cn/weather_mini?city='+str,
    		        reader: {
    		            type: 'json',//jsonp解决跨域访问
    		            root: 'forecast'
    		        }
    		    },
    		    //sortInfo: { field: 'IntData', direction: 'DESC' }
    		});
    		store.load();
    		
    		var grid=Ext.create('Ext.grid.Panel', {
    		    title: '天气情况',
    		    store: Ext.data.StoreManager.lookup('store'),
    		    columns: [
    		        { header: '日期',  dataIndex: 'date' },
    		        { header: '最高温度', dataIndex: 'high' },
    		        { header: '风力', dataIndex: 'fengli' },
    		        { header: '最低温度',  dataIndex: 'low' },
    		        { header: '风向', dataIndex: 'fengxiang' },
    		        { header: '类型', dataIndex: 'type' },
    		    ],
    		    height: 500,
    		    width: 600,
    		    renderTo: 'div1',
    		});
    	});
    </script>
</body>
</html>